<html>
<head>
  <title>AngularJS Dependency Injection</title>
</head>
<body>
  <h1>Sample Application</h1>
  <div ng-app="mainApp" ng-controller="CalcController">
    <p>Enter a number: <input type="number" ng-model="number"></p>
    <button ng-click="square()">X<sup>2</sup></button>
    <p>Result: {{ result }}</p>
  </div>
  <script src="js/angular.min.js"></script>
  <script>
  var mainApp = angular.module('mainApp', []);
  
  mainApp.config(function($provide){
    $provide.provider('MathService', function(){
      this.$get = function(){
        var factory = {};
        factory.multiply = function(a, b){
          return a * b;
        };
        return factory;
      }
    });
  });
  
  mainApp.value('defaultInput', 5);
  
  mainApp.factory('MathService', function(){
    var factory = {};
    factory.multiply = function(a, b){
      return a * b;
    };
    return factory;
  });
  
  mainApp.service('CalcService', function(MathService){
    this.square = function(a){
      return MathService.multiply(a, a);
    };
  });
  
  mainApp.controller('CalcController', function($scope, CalcService, defaultInput){
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);
    
    $scope.square = function(){
      $scope.result = CalcService.square($scope.number);
    };
  });
  
  
  </script>
</body>
</html>